<template>
  <div>
    <!-- Form -->
         <!-- <p>查看和修改</p> -->
    <el-dialog
      class="alretconent"
      title="查询"
      :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item>
          <p>请输入手机号</p>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 下面是栅格系统 -->
    
    <el-row>
        <el-col :span="4"><div><h3>病历夹</h3></div></el-col>
        <el-col :span="2" :offset="18"><div><i class="el-icon-edit"  @click="edit">修改信息</i></div></el-col>
    </el-row>
    
    <el-divider></el-divider>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item prop="name">
              <p>患者姓名</p>
              <el-input v-model="ruleForm.name" class="nameBingren"></el-input>
            </el-form-item>

            <!-- ?性别和年龄 -->

            <el-row>
              <el-col :span="12">
                <el-form-item prop="sex">
                  <div>
                    <p>性别</p>
                    <el-select v-model="ruleForm.sex" placeholder="请选择性别" class="sexclass">
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <div>
                  <el-form-item prop="age">
                    <p>年龄</p>
                    <el-input v-model="ruleForm.age" class="sexclass"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <!-- 日期年和月 -->

            <el-row>
              <el-col :span="12">
                <el-form-item prop="years">
                      <p>就诊日期</p>
                      <div class="block">
                        <el-date-picker
                          v-model="ruleForm.years"
                          type="year"
                          placeholder="选择年">
                        </el-date-picker>
                        <!-- <span class="demonstration">年</span> -->
                      </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="month">
                    <p>就诊日期</p>
                    <div class="block">
                      <el-date-picker
                        v-model="ruleForm.month"
                        type="month"
                        placeholder="选择月">
                      </el-date-picker>
                      <!-- <span class="demonstration">月</span> -->
                    </div>
                </el-form-item>
              </el-col>
            </el-row>

            <!--  电话-->
            <el-form-item prop="phone">
              <p>电话</p>
              <el-input v-model="ruleForm.phone" class="nameBingren"></el-input>
            </el-form-item>
            <!--  address-->
            <el-form-item prop="address">
              <p>地址</p>
              <el-input v-model="ruleForm.address" class="nameBingren"></el-input>
            </el-form-item>

          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light">
            
                <el-form-item prop="ms">
                     <p>就诊科室</p>
                      <el-input v-model="ruleForm.ms" class="nameBingren"></el-input>
                  </el-form-item>
                  <el-form-item  prop="desc">
                    <p>病情描述</p>
                    <el-input type="textarea" v-model="ruleForm.desc" class="bq nameBingren" :rows="6"></el-input>
                  </el-form-item>
                   <el-form-item prop="gm">
                     <p>过敏史</p>
                      <el-input v-model="ruleForm.gm" class="nameBingren"></el-input>
                  </el-form-item>
                   <el-form-item prop="zd">
                     <p>诊断医生</p>
                      <el-input v-model="ruleForm.zd" class="nameBingren"></el-input>
                  </el-form-item>
            
            </div>
            </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  prop="xq">
              <p>用药详情</p>
              <el-input type="textarea" v-model="ruleForm.xq" class="a nameBingren"></el-input>
            </el-form-item>
            <el-form-item  prop="bz">
              <p>备注</p>
              <el-input type="textarea" v-model="ruleForm.bz" class="a nameBingren"></el-input>
            </el-form-item>
            <el-form-item  prop="sc">
              <p>上传诊断报告</p>
              <el-upload
                  class="upload-demo upload"
                  drag
                  v-model="ruleForm.sc"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text nameBingren">将文件拖到此处，或<em>点击上传诊断报告</em></div>
                </el-upload>
            </el-form-item>
            
          </div>
        </el-col>
      </el-row>

      <el-form-item class="db" v-if="showbtn">
        <el-button type="primary" @click="submitForm('ruleForm')">
          立即创建
          </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import '../../assets/css/reset.scss'
export default {
  name: "Bingliadd",
  data() {
    return {
      dialogFormVisible: false,
      showbtn:false,
      form: {
        //弹窗
        phone: "",
      },
      formLabelWidth: "120px",
      ruleForm: {
        name: "888",
        age: "",
        sex: "",
        years:"",
        month:"",
        phone:"",
        address:"",

        ms:"",
        gm:"",
        zd:"",
        xq:"",
        bz:"",
        sc:""
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        years: [{ required: true, message: "请选择年", trigger: "change" }],
        month: [{ required: true, message: "请选择年", trigger: "change" }],
        phone: [{ required: true, message: "请输入phone", trigger: "blur" }],
        address: [{ required: true, message: "请输入adddress", trigger: "blur" }],
        ms: [{ required: true, message: "请输入就诊科室", trigger: "blur" }],
        desc: [{ required: true, message: "请输入病情描述", trigger: "blur" }],
        gm: [{ required: true, message: "是否有过敏史", trigger: "blur" }],
        zd: [{ required: true, message: "请输入诊断医生", trigger: "blur" }],
        xq: [{ required: true, message: "请输入用药详情", trigger: "blur" }],
        bz: [{ required: true, message: "未输入备注", trigger: "blur" }],
        sc: [{ required: true, message: "未上传文件", trigger: "blur" }],


      },
      localrow:""
    };
  },
  mounted() {
    // 刚进入页面显示弹窗
    // this. dialogFormVisible=true

   this.localrow=sessionStorage.getItem("row");
   var obj=JSON.parse(this.localrow)


      this.ruleForm.name=obj.name
  
  },
  methods: {
    edit(){ //单机编辑按钮
       this.showbtn=!this.showbtn

    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submit() {
      if (this.form.phone == "") {
        this.$message.error("错了哦，请输入正确的手机号");
      } else {
        this.dialogFormVisible = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.alretconent .el-dialog {
  width: 20% !important;
}
p {
  color: #999;
}
.bq{
  height: 140px;
}
.db{
  text-align: center;
}
.a{
  height: 75px;
}

.el-icon-edit{
  color: red;
  cursor: pointer;
}
 .sexclass{
	width: 150px;
  }
</style>